/* 
    学习目标：学习React的生命周期-创建阶段
    1. constructor  -  对标 vue中 beforeCreate/created
    2. render
    3. componentDidMount - 对标vue中的mounted钩子函数

    注意：在一个完整的声明周期
    1. constructor 和 componentDidMount 只会执行一次
    2. 但是render会重复执行
  */

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Son></Son>
      </div>
    );
  }
}

class Son extends React.Component {
  //  相当于constructor的简写写法
  // state = {
  //   msg: 'hello React',
  // };

  // 1. constructor
  // 用途：初始化state, 创建Ref
  constructor() {
    // 注意：super()一定要调用，相当于继承React组件
    super();
    // 完整的写法
    this.state = {
      msg: 'hello 666',
    };

    console.log('1', 'constructor被执行了');
  }

  // 2. render
  render() {
    console.log('2. render被执行了');
    return <h1>{this.state.msg}</h1>;
  }

  // 3. componentDidMount 会在挂载之后执行
  // 用途：1. 发送网络请求   2.DOM操作
  componentDidMount() {
    // 👍 推荐在componentDidMount中发送请求， 避免白屏，提高用户体验感
    console.log('3. componentDidMount被执行了');
  }
}
